let menu = document.createElement('div');
menu.setAttribute("id","xmd-menu");
menu.setAttribute("class","xmd-menu");

let html = `
    <a id="setCenter">居中</a>
    <a id="setPull">展开/收起</a>
    <a><input type="color" name="color" id="color" onchange="changeColor()"></a>
`;

menu.innerHTML = html;
document.body.append(menu);

function changeColor(){
    var color = document.getElementById("color");//通过使用 getElementById() 来访问 <color> 元素
    let canvas = document.getElementById('canvas');
    let xmind = document.getElementById('xmind')
    if(canvas)xmind.removeChild(canvas);
    xmind = new $xmind({
        selector:"xmind",
        data:newData,
        style:{
            line:{
                colors : [color.value]
            },
            node:{
                class : "clsred"
            }
        },
        initFn:()=>{
            let url = window.location.href;
            if(url.indexOf("echarts") > -1){
                if(fn_echarts1)fn_echarts1();
                if(fn_echarts2)fn_echarts2();
                if(fn_echarts3)fn_echarts3();
            }
            
        }
    });

    let clsred = document.querySelectorAll('.clsred');
    clsred.forEach(el=>{
        el.style.color = color.value;
        el.style.borderColor = color.value;
    })
    let claroot = document.querySelector('.xmd-node-root');
    claroot.style.backgroundColor = color.value;
}

// 居中
let setCenter = document.getElementById('setCenter');
setCenter.addEventListener('click',()=>{
    
    xmind.setCenter();
});

// 展开收起
let setPull = document.getElementById('setPull');
setPull.addEventListener('click',()=>{
    xmind.setPull();
});
